<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <div id="app">
            <input type="text" v-model="name" @keyup.enter="addHero"/>
            <input type="text" v-model="sex" @keyup.enter="addHero"/>
            <input type="text" v-model="telephone" @keyup.enter="addHero"/>
            <input type="text" v-model="age" @keyup.enter="addHero"/>
            <button @click="addHero">添加</button>
            <table border="1">
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>联系方式</th>
                    <th>年龄</th>
                </tr>
                <tr v-for="(item,index) in shop">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.telephone}}</td>
                    <td>{{item.age}}</td>
                </tr>
            </table>
        </div>
        <script src="./js/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    name: "",
                    sex: "",
                    telephone: "",
                    age: "",
                    shop: [
                        {"id": 1, "name": "大春", "sex": "男", telephone: 12345678901, age: 20},
                        {"id": 2, "name": "大鹏", "sex": "男", telephone: 12345678902, age: 16},
                        {"id": 3, "name": "小甜甜", "sex": "女", telephone: 12345678903, age: 28},
                        {"id": 4, "name": "小花", "sex": "女", telephone: 12345678904, age: 18},
                        {"id": 5, "name": "测试", "sex": "男", telephone: 12345678905, age: 23},
                        {"id": 6, "name": "山山", "sex": "男", telephone: 12345678906, age: 25},
                    ],
                    num: 7
                },
                methods: {
                    addHero() {
                        if (this.name === "" && this.sex === "" && this.telephone === "" && this.age === "") {
                            alert("输入的数据不能为空");
                            return;
                        }
                        this.shop.push({
                            "id": this.num,
                            "name": this.name,
                            "sex": this.sex,
                            "telephone": this.telephone,
                            "age": this.age,
                        });
                        this.name = "";
                        this.sex = "";
                        this.telephone = "";
                        this.age = "";
                        this.num++;
                    }
                }
            })
        </script>
    </body>

</html>